

import { colorDB } from "./color.data";
import ColorSelect from "./components/ColorSelect"
import './colorPane.less';

// 上下文传递数据


const colorUIList:Array<Array<any>> = [];
for (let key in colorDB) {
  colorUIList.push(colorDB[key])
}

const hueList = Array.from(Array(360)).map((i, idx) => idx);

function colorPane() {

  return (
    <div className="page color-pane">
      {/* 颜色配色方案 */}
      {/* <div className="color-ui-list">
        <div>颜色方案</div>
        <div className="color-grid">
          {
            colorUIList.map((item, idx) => {
              return (
                <div key={'ui' + idx} className="color-row">
                  {
                    item.map((it, ix) => {
                      return (
                        <div key={'block'+ix} style={{backgroundColor: '#' + it}} title={'#' + it}></div>
                      )
                    })
                  }
                </div>
              )
            })
          }
        </div>
      </div> */}

      <div className="color-hsv">
          <div>hsl颜色展示</div>
          <div>
            {
              hueList.map(item => {
                return (
                  <div key={item} style={{backgroundColor: `hsl(${item}, 100%, 50%)`, height: '1px', width: '150px'}}></div>
                )
              })
            }
          </div>
      </div>
      <div>
        <ColorSelect />
      </div>
    </div>
  )
}

export default colorPane;